Facebook Static FBML

May 20th, 2010

Facebook is the most popular social networking platform with over 400 million active users. It is a great tool for free promotion and engaging the general public, and due to this the Facebook Pages have become very popular with all types of organisations and celebrities.

The Static FBML application enables you to add custom boxes and tabs to any Facebook Page, allowing complete customisation of sections using Facebooks markup language; FBML, which is based on HTML. In this post I’ll explain how to install Static FBML and implement it on your very own Page.

Installing Static FBML

Try this link : Static FBML, or search for “Static FBML” on Google. Then add the application to your Page, and you’re done!

Static FBML will store the code but not the media. For example, you don’t have to import any CSS via http links, but you do need to store images on a server and statically link to them. You also don’t need any FBML open or close tags like you do in HTML, you simply wrap your code in a div: e.g. <div id=”body”> </div> and place your CSS at the start of your code inside style tags <style type=”text/css”></style>.

Update

Facebook have made some changes, for your tab to work correctly in all versions of IE you must have your CSS hosted on an external server and link to CSS as you would in a normal html document.

E.g. <link rel=”stylesheet” type=”text/css” href=”http://yourserver.com/syles.css” media=”screen”/>

You can create a simple ‘website’ that sits within Facebook, the content of which must be static, but there’s nothing stopping you linking out to other sites and pages. This is all contained within a custom tab with a maximum width of 520px.

Embedding Flash

There are endless ways to use this tab function… I’ve even embedded flash using the following code:

<fb:swf
swfbgcolor=”#000000″
swfsrc=”"
imgstyle=”border-width:3px; border-color:black;”
imgsrc=”" width=”520″ height=”400″ waitforclick=”false” />

You must have a static image that needs to be clicked to launch the Flash, but other then that there are no major restrictions.

Share Button

You can also use the Facebook share function to easily add a share button with the following code:

<fb:share-button class=”url” href=”http://www.linktoshare.com” />

Or a Share button with a shared information set.

<fb:share-button class=”meta” >
<meta name=”title” content=”" />
<meta name=”description” content=”" />
<link rel=”image_src” href=”" />
<link rel=”target_url” href=”" />
</fb:share-button />

There’s lots more information here: http://developers.facebook.com/docs/ and please feel free to ask any questions and share your comments below.

Shortlink:

By Chris Kemm

rene

i want to maintain a simple database of badminton courts for my fanpage in FB. i haven’t found any FB-endorsed dbase-type application that i could just add to my page, so i believe i will have to link to an external one and the simplest external db i know to work with is a spreadsheet on google docs.
so all i’d like to do is be able to embed my spreadsheet into my fanpage. i found the static FBML app and added it, but the available resources to guide a total newbie like me are very sparse.
can you pls point me in the right direction for what i want to achieve?
many thanks!
http://www.whatcreative.co.uk Chris Kemm

Hi Rene sorry for the late reply!

Unfortunately I dont have a simple answer to your question, I haven’t tried any integration of database systems using FBML. The application doesn’t widely support and dynamic code. I would recommend using an iFrame application and display the information in that way.
http://www.vampal.com Linda Amoxi

cool,I’ve created a sample page for our website
http://yuradesign.com george

I made a FBML tab with Flash content, it shows up, preview image shows, flash shows, links are shown but they do not work! what could be wrong? Maybe it isnt FB problem?

http://www.facebook.com/pages/PANAVTO-Mercedes-Benz/132100206804505?v=app_7146470109&ref=sgm
http://none Erik

Hi, thanks for the post.

But I have one question, maybe you can help me. I have created a fan page! where people needs to press “like” before they page become visible.
But they thing I need is to add a “share bottom” so when they share it on their wall then it becomes visble? please see here

http://www.facebook.com/pages/Toj/128347387234656?v=app_4949752878

I hope you can help
http://www.whatcreative.co.uk What!?

Hi Erik,

I’m not sure that it’s possible to do what you are asking… The ‘share’ buttons are prebuilt into Facebook and I don’t think you can add custom ones unless you try to plug-in something like ShareThis (http://sharethis.com/), but as I said, I don’t think it’s possible.

Whenever someone ‘Likes’ your page it is usually posted on their wall for all their friends to see anyway…

Thanks

Chris
Icon

Hi

I have set up an fbml tab to our charity fan page but was wondering if there was a way of changing the static fbml icon that shows at the side of the page. I have seen other sites who have replaced the default icon with their logo but cant figure out how they have done it!

Thanks
http://www.whatcreative.co.uk What!?

Could you post a link so that we can see what you’re referring to?

Cheers
Marco

Hello,

I am trying to get css3 properties to work, mainly border radius and @ font-face but no dice…is there a restriction to it?
http://www.whatcreative.co.uk What!?

Hi Marco,

To be perfectly honest we have not done too much experimentation with CSS3 whist using static FMBL (I presume your problems are with Facebook and not with getting CSS3 to work in a normal browser environment?).

However, static FMBL is quickly being dropped in favour of iFrame apps now, which, if using the correct browsers will render CSS3 perfectly. We will be writing a post all about this very shortly so please keep an eye out.

Thanks a lot,

Chris
http://www.bogaziciperde.com perde

cool,I’ve created a sample page for our website